<template>
  <div>
    <div>【大区数据信息】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

// 获取 dom 实例
const target = ref(null)
// echarts 实例变量
let myChart = null

onMounted(() => {
  // 在 mounted 生命周期之后，实例化 echarts
  myChart = echarts.init(target.value)
  // 渲染 echarts
  renderChart()
})
// 渲染图表
const renderChart = () => {
  const options = {
    // x 轴展示数据
    xAxis: {
      // 数据展示
      type: 'value',
      // 不显示轴
      show: false,
      // 最大值（防止触顶）
      max: function (value) {
        // 取整
        return parseInt(value.max * 1.2)
      }
    },
    // y 轴展示数据
    yAxis: {
      // 数据展示
      type: 'category',
      // 数据筛选
      data: props.data.regions.map((item) => item.name),
      // 反向展示
      inverse: true,
      // 不显示轴线
      axisLine: {
        show: false
      },
      // 不显示刻度
      axisTick: {
        show: false
      },
      // 文字色值
      axisLabel: {
        color: '#9EB1C8'
      }
    },
    // echarts 网格绘制的位置，对应 上、右、下、左
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      // 计算边距时，包含标签
      containLabel: true
    },
    // 核心配置
    series: [
      {
        // 图表类型
        type: 'bar',
        // 数据筛选
        data: props.data.regions.map((item) => ({
          name: item.name,
          value: item.value
        })),
        // 显示背景
        showBackground: true,
        // 背景色
        backgroundStyle: {
          color: 'rgba(180,180,180,0.2)'
        },
        // 每个轴的样式
        itemStyle: {
          color: '#479AD3', // 柱子颜色
          barBorderRadius: 5, // 柱子圆角
          shadowColor: 'rgba(0,0,0,0.2)', //柱子阴影的颜色
          shadowBlur: 5, //柱子阴影模糊的大小
        },
        // 轴宽度
        barWidth: 12,
        // 轴上的字体
        label: {
          show: true,
          // 位置
          position: 'right',
          // 颜色
          textStyle: {
            color: '#fff'
          }
        }
      }
    ]
  }

  myChart.setOption(options)
}

// 监听数据变化，重新渲染图标
watch(
  () => props.data,
  () => {
    renderChart()
  }
)
</script>